<!-- eslint-disable -->
<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="驾照类型">
        <el-input v-model="searchForm.type" placeholder="驾照类型"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 50px; margin-top: 50px"
      @click="dialogVisible = true"
      :disabled="role !== 'admin'"
      >添加驾照</el-button
    >

    <el-table :data="licenseList" border style="width: 100%">
      <el-table-column prop="id" label="驾照编号" width="180" align="center"></el-table-column>
      <el-table-column
        align="center"
        prop="type"
        label="驾照类型"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="car"
        label="准驾车型"
        width="300"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="price"
        label="报名价格(￥)"
        width="100"
      ></el-table-column>

      <el-table-column
        prop="photo"
        align="center"
        label="车型图片"
        width="150"
        class="imgwrap"
      >
        <template v-slot="{ row }">
          <img :src="row.img" alt />
        </template>
      </el-table-column>

      <el-table-column align="center" prop="address" label="操作" >
        <template slot-scope="{ row, index }">
          <el-button
            title="删除驾照"
            type="danger"
            size="medium"
            icon="el-icon-delete"
            @click="deleteLic(row)"
            :disabled="role !== 'admin'"
          ></el-button>
          <el-button
            title="报考该驾照"
            type="success"
            size="medium"
            icon="el-icon-s-flag"
            :disabled="role !== 'user'"
            @click="goApplication(row)"
          ></el-button>
          <el-button
            title="驾照详情"
            type="info"
            size="medium"
            icon="el-icon-message"
            @click="getLicInfo(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[4, 6, 8, 10]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 添加的弹出框 -->
    <el-dialog title="添加驾照" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="驾照类型">
          <el-input v-model="form.type" placeholder="请输入类型"></el-input>
        </el-form-item>
        <el-form-item label="准驾车型">
          <el-input v-model="form.car" placeholder="请输入车型"></el-input>
        </el-form-item>
        <el-form-item label="车型图片">
          <el-input v-model="form.img" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="报名价格">
          <el-input v-model="form.price" placeholder="请输入报名价格"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLinceses">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="驾照详情" :visible.sync="infoStatus" width="50%">
      <el-form :model="info">
        <el-form-item style="width: 600px" label="头像">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
          >
            <img v-if="info.img" :src="info.img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="驾照类型">
          <el-input v-model="info.type"></el-input>
        </el-form-item>
        <el-form-item label="准驾车型">
          <el-input v-model="info.car" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="报名价格">
          <el-input v-model="info.price" placeholder="请输入姓名"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
/* eslint-disable */
import {
  licenseList,
  addLincese,
  deleteLicense,
  getInfo,
  application,
  searchLicense
} from "@/api/license";
import { getToken } from "@/utils/auth";
import { mapState } from "vuex";
export default {
  name: "License",
  data() {
    return {
      infoStatus: false,
      dialogVisible: false,
      total: 0,
      searchForm:{type:null},
      licenseList: [],
      pageNumber: 1, //当前页
      pagesize: 4, //分页的数据
      form: {
        id: "",
        type: "",
        price: "",
        car: "",
        img: "",
      },
      info: {},
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.getLicenseList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getLicenseList();
    },
    // 获取驾照列表
    async getLicenseList() {
      let res = await licenseList({
        pageNumber: this.pageNumber,
        pagesize: this.pagesize,
      });

      if (res.code == 200) {
        this.licenseList = res.data;
        this.total = res.totalCount;
      }
    },
    // 添加驾照信息
    async addLinceses() {
      let res = await addLincese(this.form);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getLicenseList();
      }
      this.dialogVisible = false;
      this.form = {};
    },
    async deleteLic(row) {
      let res = await deleteLicense(row.id);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getLicenseList();
      }
    },
    async getLicInfo(row) {
      this.infoStatus = true;
      let res = await getInfo(row.id);
      console.log(res);
      if (res.code == 200) {
        this.info = res.data;
        this.$message({
          message: res.message,
          type: "success",
        });
      }
    },
    //  报名驾照
    async goApplication(row) {
      console.log(this.nickname, row.type);
      let data = {};
      data.nickname = this.nickname;
      data.type = row.type;
      data.photo = this.photo ;
      console.log(data, "学员信息");
      let res = await application(data);
      console.log(res);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
      }
    },
    async search() {
      
      
      if (this.type==''){
        this.getLicenseList()
        return
      }
      let res = await searchLicense(this.searchForm);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.licenseList = res.data;
        this.total = res.data.length;
      }
    },
  },
  mounted() {
    this.getLicenseList();
  },
  computed: {
    ...mapState({
      nickname: (store) => store.user.info.nickname,
      role: (store) => store.user.info.role,
      photo: (store) => store.user.info.photo,
    }),
  },
};
</script>

<style scoped>
img {
  width: 130px;
  height: 130px;
  margin-right: 15px;
}
.box-card {
  width: 1200px;
  margin-left: 50px;
  margin-top: 50px;
}
</style>
